function Page({ total, callback }) {
    this.total = total; // 14
    // 记录上一次的总数
    this.prevTotal = null;
    this.index = 0;
    this.callback = callback;
    this.init()
}

Page.prototype = {
    init() {
        this.initEvent()
    },
    initEvent() {
        $('.pagination').on('click', 'a.page', this.pageListClick.bind(this))
        $('.pagination').on('click', 'a.arrow', this.pageArrowClick.bind(this))
    },
    pageArrowClick(e) {
        let $that = $(e.target);

        if ($that.hasClass('prev')) {
            if (this.index == 0) {
                alert('别点了')
                return
            }
            --this.index
        } else {
            if (this.index == $('.page').length - 1) {
                alert('没有了')
                return
            }
            ++this.index
        }

        $('a.page')
            .filter('.on')
            .removeClass('on')

        $('.page-num')
            .eq(this.index)
            .find('a')
            .addClass('on')

        this.callback(this.index);
    },

    pageListClick(e) {
        this.index = $(e.target).data('num');
        $(e.target)
            .addClass('on')
            .parent()
            .siblings()
            .find('a.on')
            .removeClass('on')
        this.callback(this.index);
    },

    renderPageList() {
        if (this.prevTotal === this.total) { // 14 
            return
        }
        /* flag标记 */
        this.prevTotal = this.total; // 14
        let pageTotal = parseInt(Math.ceil(this.total / 3));

        let arr = [` <li class="page-item">
            <a class="page-link arrow prev" href="javascript:;" tabindex="-1">上一页</a>
        </li>
       `]
        for (let i = 0; i < pageTotal; i++) {
            arr.push(
                ` <li  class="page-item page-num">
                        <a data-num="${i}"
                        class="page-link page ${i==0?'on':''}"   
                            href="javascript:;">
                            ${i+1}
                            </a>
             </li>`)
        }
        arr.push(` <li class="page-item">
            <a class="page-link arrow next" href="javascript:;">下一页</a>
        </li>`)

        $('.pagination').html(arr)
    }
}